<template>
    <!-- 加载用户信息loading begin-->
    <m-loading :show="true" class="absfit" v-if="status == 2"></m-loading>
    <!-- 加载用户信息loading end-->

    <!-- routerView begin-->
    <transition :name="transitionName" v-else-if="status == 1" @before-enter="willChange" @before-leave="willChange"
                @after-enter="un_willChange"
                @after-leave="un_willChange">
        <navigation>
            <router-view class="app-router-view" ref="view"/>
        </navigation>
    </transition>
    <!-- routerView end-->


    <!-- 用户信息获取失败 begin -->
    <section class="absfit text3" flex="dir:top main:center cross:center" style="margin-top: -20%" v-else="status == 0">
        <div>
            <i class="iconfont icon-SYS_STA_2 f120"></i>
            <p class="mt20 f16">连接失败, <span class="c2" @click="onRefresh">刷新</span>重试</p>
        </div>
    </section>
    <!-- 用户信息获取失败 end -->
</template>

<script>
  import popup from './pages/收到优惠券弹窗'

  export default {
    name: 'App',
    data () {
      return {
        transitionName: null
      }
    },
    computed: {
      status () {
        return this.$store.getters.states
      }
    },
    created () {
      this.onRefresh()
      // 前进
      this.$navigation.on('forward', (to, from) => {
        this.transitionName = 'forward'
      })
      // 回退
      this.$navigation.on('back', (to, from) => {
        this.transitionName = 'back'
        return false
      })
      /*
      *  查看是否有收到新的优惠券， 有则弹窗提示
      * */
      const unwatch = this.$watch('status', states => {
        if (states !== 1) return
        popup()
        unwatch()
      })
      this.stupidbackend()
    },
    mounted () {
      window.getCurrentView = () => this.$refs.view
    },
    methods: {
      willChange (el) {
        //el.style.willChange = 'transform'
      },
      un_willChange (el) {
        //el.style.willChange = null
      },
      onRefresh () {
        this.$store.dispatch('updateUserInfo')
        this.$store.dispatch('updateCompanyInfo')
      },
      // 冗余接口
      async stupidbackend () {
        await sleep(300)
        // 修复储值卡充值异常
        this.$get('/payRecord/repairPayRecord')
      }
    }
  }

  function createStyle () {
    const width = document.documentElement.clientWidth
    let style_tag = document.querySelector('#app_handoff')
    const gap = 0.2
    const style = `
      @keyframes moveFromLeft {
        from {
          transform: translateX(-${width * gap}px);
          opacity: 0.5;
        }
      }
      @keyframes moveToRight {
        to {
          transform: translateX(${width}px);
        }
      }
      @keyframes moveFromRight {
        from {
          transform: translateX(${width}px);
        }
      }
      @keyframes moveToLeft {
        to {
          transform: translateX(-${width * gap}px);
          opacity: 0.5;
        }
      }
    `
    if (!style_tag) {
      style_tag = document.createElement('style')
      style_tag.id = 'app_handoff'
      document.body.appendChild(style_tag)
    }
    style_tag.innerHTML = style
  }

  createStyle()
  window.addEventListener('resize', createStyle)
</script>
<style lang="scss" type="text/scss">
    $duration: 400ms;
    .back-enter-active,.back-leave-active,.forward-enter-active,.forward-leave-active {
        overflow: hidden;
    }
    /* back */
    .back-enter-active {
        animation: moveFromLeft $duration ease forwards;
    }

    .back-leave-active {
        animation: moveToRight $duration ease forwards;
        z-index: 1;
    }

    /* forward */
    .forward-enter-active {
        animation: moveFromRight $duration ease forwards;
    }

    .forward-leave-active {
        animation: moveToLeft $duration ease forwards;
    }

    html, body {
        width: 100%;
        height: 100%;
    }
</style>
<style type="text/scss" lang="scss" scoped>
    .app-router-view {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        backface-visibility: hidden;
    }
</style>
